<template>
  <div class="ttp" >
    <!-- <el-form :model="category" :inline="true" :rules="rules" ref="category" label-width="100px" class="add_cate_container">
      <el-form-item label="" prop="food_name">
        <el-input placeholder="添加分类" v-model="category.food_name" style="width: 200px;" class="filter-item" @keyup.enter.native="add_category"></el-input>
      </el-form-item>
      <el-form-item label="" prop="value">
        <el-input placeholder="分类拼音" v-model="category.value" style="width: 200px;" class="filter-item" @keyup.enter.native="add_category"></el-input>
      </el-form-item>
        <el-button type="primary" @click="add_category('category')" class="add">添加</el-button>
    </el-form> -->
    <div class="add_cate_container">
        <el-input placeholder="添加分类" v-model="category.food_name" style="width: 200px;" class="filter-item" @keyup.enter.native="add_category"></el-input>
        <el-input placeholder="分类拼音" v-model="category.value" style="width: 200px;" class="filter-item" @keyup.enter.native="add_category"></el-input>
        <el-button type="primary" @click="add_category()" class="add">添加</el-button>
    </div>
    <div class="header_container">
      <el-upload
        :show-file-list="false"
        class="avatar-uploader"
        action="http://localhost:80/storehead/upload"
        :on-success="handleAvatarSuccess"
        :before-upload="beforeAvatarUpload">
        <img v-if="imageUrl" :src="imageUrl" class="avatar">
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
      <div class="msg">商品图片</div>
    </div>
    <div class="form_body">
      <el-form :label-position="labelPosition" :rules="rules"  class="form" ref="formData" label-width="80px" :model="formData">
        <el-form-item label="商品名" prop="food_name">
            <el-input v-model="formData.food_name"></el-input>
        </el-form-item>
        <el-form-item label="商品信息" prop="food_msg">
            <el-input v-model="formData.food_msg"></el-input>
        </el-form-item>
        <el-form-item label="店铺名" prop="storeName">
            <el-input v-model="formData.storeName"></el-input>
        </el-form-item>
        <el-form-item label="商品价格" prop="food_price">
            <el-input v-model.number="formData.food_price"></el-input>
        </el-form-item>
        <el-form-item label="选择分类">
          <el-select v-model="value" placeholder="选择分类">
            <el-option
              v-for="item in choose_cate"
              :key="item.value"
              :label="item.food_name"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
            <el-button type="primary" class="btn" @click="submitForm('formData')">添加</el-button>
        </el-form>
    </div>
  </div>
</template>

<script>
import {post, get} from '../../assets/http.js'
export default {
  name: 'AddManage',
  data () {
    return {
      category: {
        food_name: '',
        value: ''
      },
      choose_cate: [
        // {
        //   food_name: '缤纷水果',
        //   value: 'shuiguo'
        // },
        // {
        //   food_name: '香喷奶茶',
        //   value: 'naicha'
        // },
        // {
        //   food_name: '可口芬达',
        //   value: 'fenda'
        // }
      ],
      value: '',
      imageUrl: '',
      labelPosition: 'right',
      formData: {
        food_name: '',
        food_msg: '',
        storeName: '',
        food_price: ''
      },
      rules: {
        food_name: [
          { required: true, message: '请输入活动名称', trigger: 'blur' }
        ],
        food_msg: [
          { required: true, message: '请输入商品介绍', trigger: 'blur' }
        ],
        storeName: [
          { required: true, message: '请输入店铺名称', trigger: 'blur' }
        ],
        food_price: [
          { required: true, message: '请输入商品价格', trigger: 'blur' },
          { type: 'number', message: '必须为数字', trigger: 'blur' }
        ]
      }
    }
  },

  mounted () {
    this.getCate()
  },
  methods: {
    // 1.添加分类信息
    async add_category () {
      var value = this.category.value
      var foodName = this.category.food_name
      // alert(this.formLabelAlign.username.length)
      if (foodName.length < 1) {
        this.$message.error('请填写分类名称')
        return
      }
      if (value.length < 1) {
        this.$message.error('请填写分类拼音')
        return
      }
      var res = await post('/store/addCate', {food_name: this.category.food_name, value: this.category.value, store_id: this.$route.query.store_id})
      console.log(res.flag)
      if (res.flag) {
        this.$message.success('添加成功')
        this.category = {
          food_name: '',
          value: ''
        }
        this.getCate()
      } else {
        this.$message.error('添加失败 请稍后再试')
      }
    },
    // 2.添加商品
    submitForm (formData) {
      if (this.imageUrl.length < 1) {
        this.$message.error('请上传店铺头像')
        return
      }
      if (this.value.length < 1) {
        this.$message.error('请选择商品分类分类')
        return
      }
      this.$refs[formData].validate((valid) => {
        if (valid) {
          var storeId = this.$route.query.store_id
          post('/store/addGood', { store_id: storeId, food_name: this.formData.food_name, storeName: this.formData.storeName, food_msg: this.formData.food_msg, food_price: this.formData.food_price, food_pic: this.imageUrl, value: this.value }).then(res => {
            if (res.flag) {
              // 添加成功
              this.imageUrl = ''
              this.formData = {}
              this.getStoreName(storeId)
              this.$message.success('添加成功')
            } else {
              // 添加失败
              this.$message.error('添加成功失败')
            }
          })
        }
      })
    },
    getCate () {
      // 1.根据店铺id获取分类信息  赋值分类名称给value
      var storeId = this.$route.query.store_id
      if (storeId != null && storeId !== undefined) {
        get('/store/getCategoryByStoreId', {store_id: storeId}).then(res => {
        // console.log(res)
          if (res.flag) {
            this.choose_cate = res.data
            this.value = res.data[0].value
          } else {
            this.$message.error('请稍后再试')
          }
        })
        this.getStoreName(storeId)
      }
    },
    getStoreName (storeId) {
      // 2.根据店铺id获取店铺名
      get('/store/getStoreMsg', {store_id: storeId}).then(res => {
        if (res.flag) {
          // this.formData.storeName = ''
          this.formData.storeName = res.data.storeName
          // console.log(res.data)
        }
      })
    },
    // 上传图片之前的操作
    beforeAvatarUpload (file) {
      // 上传前
      const isJPG = file.type === 'image/jpeg'
      const isPNG = file.type === 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 2
      // console.log(file.type)
      if (!isJPG && !isPNG) {
        this.$message.error('上传头像图片只能是 JPG/PNG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isLt2M && (isPNG || isJPG)
    },
    // 上传图片成功后赋值路径
    handleAvatarSuccess (res, file) {
      if (res.flag) {
        this.imageUrl = res.url
        this.$message.success('上传成功')
      } else {
        this.$message.error('上传失败，请检查网络')
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
.header_container{
  /* border: 1px solid #000; */
  margin-left: 10%;
  margin-top: 5%;
  width: 20%;
  display: flex;
  flex-direction: column
}
.msg{
  /* text-align: center; */
  margin-left: 20%;
}
.avatar-uploader-icon {
  border: 1px dashed #8c939d;
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.form_body{
  position: fixed;
  width: 30%;
  /* margin-top: 100px; */
  /* margin-left: 35%; */
  top: 22%;
  left: 30%;
}

.btn{
  margin-left: 200px;
}
.add_cate_container{
  position: fixed;
  top: 12%;
  left: 27%;
}
.ttp{
  /* 距离上部分的高度 */
  top: 60px;
}
</style>
